import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import {
    Grid,
    Typography,
    InputLabel,
    FormControl,
    MenuItem,
    FormHelperText,
    Select,
    Tabs,
    Tab,
    Box,
    Divider,
    OutlinedInput,
    InputAdornment,
    Menu,
} from '@material-ui/core';
import { Modal, Input, Upload, Button } from "antd"
import { Image, Icon } from 'components/atoms';
import Pagination from '@material-ui/lab/Pagination';
import cd from "assets/images/cd.png"
import { callGetNewsApi, callPostNewsApi } from 'utils/networking';
import { Genres, Hero } from "./components"
import { svg } from "./svg"

import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from "react-router-dom";
import { setPlaysItem } from 'redux/actions/PlaysActions'
import {  setSteamVideo} from 'redux/actions/CoverActions';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "20px",
        background: '#000',
        "& .MuiTabs-indicator": {
            display: "none"
        },
        "& .MuiTab-root": {
            color: "white",
            paddingLeft: "12px",
            paddingRight: "12px",
            minWidth: "80px",
            maxWidth: "90px",
            [theme.breakpoints.up('sm')]: {
                minWidth: "80px",
                maxWidth: "90px",
            },
            [theme.breakpoints.up('md')]: {
                minWidth: "90px",
                maxWidth: "80px",
            },
            [theme.breakpoints.up('lg')]: {
                minWidth: "110px",
                maxWidth: "170px",
            },
        },
        "& .MuiTab-wrapper": {
            // padding: "0 8px",
            borderRadius: "2px",
        },
        "& .Mui-selected .MuiTab-wrapper": {
            background: "#E24575",
        },
        "& .MuiSvgIcon-fontSizeSmall ": {
            color: "white",
        },
    },
    title: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "56px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        color: "rgba(30, 30, 30, 1)",
        padding: "30px 0",
        [theme.breakpoints.up('md')]: {
            fontSize: "63px",
        },
    },
    typography: {
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "40px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "40px",
        textTransform: "uppercase",
        color: "#7E53F9",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
            lineHeight: "85px",
        },
    },
    typography1: {
        color: "#fff",
    },
    typography2: {
        color: "#fff",
        lineHeight: "20px",
        fontSize: "20px",
        width: "200px",
        overflow: "hidden",
        whiteSpace: "nowrap",
        textOverflow: "ellipsis",
        [theme.breakpoints.up('sm')]: {
            fontSize: "22px",
            lineHeight: "22px",
            width: "300px",
        },
        [theme.breakpoints.up('md')]: {
            fontSize: "22px",
            lineHeight: "22px",
            width: "200px",
        },
        [theme.breakpoints.up('lg')]: {
            fontSize: "22px",
            lineHeight: "22px",
            width: "300px",
        },
        [theme.breakpoints.up('xl')]: {
            fontSize: "22px",
            lineHeight: "22px",
            width: "400px",
        },
    },
    typography3: {
        fontSize: "16px",
        lineHeight: "normal",
        color: "#808994",
    },
    typography4: {
        fontSize: "16px",
        lineHeight: "normal",
        color: "#B4B4B4",
        textTransform: "none",
    },
    grid: {
        padding: "20px 0",
        flexWrap: "nowrap",
        cursor: "pointer"
    },
    gridItem: {
        paddingLeft: "20px",
        width: "100%",
    },

    image: {
        height: "80px",
        width: "120px",
        borderRadius: "6px",
        overflow: "hidden",
        [theme.breakpoints.up('sm')]: {
            width: "140px",
            height: "90px",
        },
        [theme.breakpoints.up('md')]: {
            width: "130px",
            height: "90px",
        },
        [theme.breakpoints.up('lg')]: {
            height: "100px",
            width: "160px",
        },
    },
    img: {
        objectFit: "cover",
        verticalAlign: "middle",
    },
    adImage: {
        marginTop: "30px",
        display: "none",
        borderRadius: "8px",
        overflow: "hidden",
        "& span": {
            verticalAlign: "middle",
        },
        [theme.breakpoints.up('md')]: {
            display: "block",
        },
    },
    adLeft: {
        marginRight: "50px"
    },
    adRight: {
        marginLeft: "50px"
    },
    medias: {
        minHeight: "70vh"
    },
    formControl: {
        minWidth: 120,
        width: "100%",
        color: "white",
        backgroundColor: "white",
        paddingLeft: "10px",
        "& .MuiInput-underline:after": {
            border: "none"
        },
        "& .MuiInput-underline:before": {
            border: "none"
        },
        "& .MuiInput-underline:hover:before": {
            border: "none"
        }
    },
    pagination: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: "20px 0",
        "& .MuiPaginationItem-page": {
            backgroundColor: "#232637",
            color: "#FFFFFF",
        },
        "& .Mui-selected": {
            backgroundColor: "#E24575",
        },
        "& .MuiPaginationItem-ellipsis": {
            color: "#FFFFFF",
        },
    },
    sort: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: "start",
        position: "absolute",
        top: "50px",
        right: "0",
        [theme.breakpoints.up('sm')]: {
            top: "0",
        },
        [theme.breakpoints.up('md')]: {
            right: "-40px",
            top: "50px",
        },
        [theme.breakpoints.up('lg')]: {
            right: "-40px",
            top: "0",
        },
    },
    ul: {
        position: "absolute",
        top: "40px",
        left: "0",
        listStyle: "none",
        zIndex: 20,
        borderRadius: "0 0 4px 4px",
        overflow: "hidden",
        borderTop: "1px solid rgba(0, 0, 0, 0.10)",
        backgroundColor: "#FFFFFF",
    },
    ul1: {
        top: "100%",
        right: "-100%",
    },
    ulHead: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "10px 20px",
        fontFamily: "HurmeGeometricSans3-Black",
        borderBottom: "1px solid rgba(0, 0, 0, 0.10)",
    },
    ulFoot: {
        display: "flex",
        justifyContent: "start",
        alignItems: "center",
        padding: "10px 30px 20px",
        fontFamily: "HurmeGeometricSans3-Black",
        borderTop: "1px solid rgba(0, 0, 0, 0.10)",
    },
    content: {
        maxHeight: "200px",
        overflowY: "auto",
        overflowX: "hidden",
    },
    li: {
        width: "180px",
        cursor: "pointer",
        padding: "8px 10px",
        "&:hover": {
            backgroundColor: "#EDF5FA",
        },
        fontSize: "14px",
        display: "flex",
        justifyContent: "start",
        alignItems: "center",
        minHeight: "50px",
    },
    li1: {
        width: "500px",
        padding: "8px 40px",
    },
    i: {
        "& svg": {
            verticalAlign: "middle"
        }
    },
    mark: {
        position: "fixed",
        width: "100%",
        height: "100%",
        zIndex: 10,
        marginTop: "-64px",
    },
    searchInputContainer: {
        background: theme.palette.background.paper,
        padding: theme.spacing(1.5),
        boxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.11)',
        borderRadius: theme.spacing(0.5),
        width: '180px',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        '& .MuiOutlinedInput-notchedOutline': {
            border: '0 !important',
        },
        '& .MuiOutlinedInput-adornedEnd': {
            paddingRight: 0,
        },
        '& .MuiOutlinedInput-input': {
            padding: 0,
        },
    },
    iconButton: {
        position: "relative"
    },
    ModalGrid: {
        padding: "20px 0",
        [theme.breakpoints.up('md')]: {
            padding: "50px 0",
        },
    },
    ModalGridItem: {
        paddingLeft: "0",
        [theme.breakpoints.up('md')]: {
            paddingLeft: "20px",
        },
    },
    ModalUpload: {
        display: "flex",
        justifyContent: "center", alignItems: "center",
        flexDirection: "column",
        width: "100%",
        height: "150px",
        background: "#3b3b3b",
        borderRadius: "8px",
        [theme.breakpoints.up('md')]: {
            height: "100%",
        },
    },
    ModalTitle: {
        color: "#b7b7b7",
        fontSize: "16px",
        marginButton: "10px",
        marginTop: "10px",
        [theme.breakpoints.up('md')]: {
            marginTop: "0",
        },
    },
    ModalTitle1: {
        marginTop: "20px",
    },
    payListImg: {
        backgroundSize: "100% 100%",
        // [theme.breakpoints.up('sm')]: {
        //     backgroundSize: "30% 100%",
        // },
        // [theme.breakpoints.up('md')]: {
        //     backgroundSize: "100% 100%",
        // },
    }
}));



const sortType = ["top_rated", "a_z", "z_a", "most_plays", "rand", "most_reviews"]

function LiveFeed() {

    const classes = useStyles();
    const token = localStorage.getItem('token');
    const selectId = useSelector((state) => state.liveFeed.selectId);
    const [searchKey, setSearchKey] = useState('');
    const [sortValue, setSortValue] = useState(null);
    const [liveFeedData, setLiveFeedData] = useState({
        songs: { data: [] },
        episodes: { data: [] },
        playlists: { data: [] },
    });
    const [playlists, setPlaylists] = useState([]);
    const [offset, setOffset] = useState(1);

    const searchBlogs = () => {
        getServerSideProps()
    }
    const dispatch = useDispatch()
    const profileData = useSelector((state) => state.auth.profileData)
    const history = useHistory();

    const [currentTab, setCurrentTab] = useState(0);
    const handleTabChange = (event, newValue) => {
        setCurrentTab(newValue);
        setOffset(1)
    };

    function a11yProps(index) {
        return {
            id: `simple-tab-${index}`,
            'aria-controls': `simple-tabpanel-${index}`,
        };
    }

    function TabPanel(props) {
        const { children, value, index, ...other } = props;

        return (
            <div
                role="tabpanel"
                hidden={value !== index}
                id={`simple-tabpanel-${index}`}
                aria-labelledby={`simple-tab-${index}`}
                {...other}
            >
                {(
                    <Box sx={{ pt: { xs: 5, sm: 3 }, pb: 5, pl: { xs: 0, sm: 3 }, pr: { xs: 0, sm: 3 }, }}>
                        {children}
                    </Box>
                )}
            </div>
        );
    }

    useEffect(() => {
        getServerSideProps()
    }, [searchKey, offset, sortValue, selectId])

    const getServerSideProps = async () => {
        callGetNewsApi(`song/livefeed?search_text=${searchKey}&offset=${offset}&limit=16&sort_key=${sortType[sortValue]}&genre_ids=${selectId.join(",")}`, dispatch, (data) => {
            console.log(data);
            setLiveFeedData(data);
        })
    }

    const [liveFeedAdData, setLiveFeedAdData] = useState([]);

    useEffect(() => {
        getServerAdProps()
        getServerVideoProps()
    }, [])

    const getServerVideoProps = async () => {
        callGetNewsApi('cover/steam_video', dispatch, (data) => {
          dispatch(setSteamVideo(data));
        });
      }

    const getServerAdProps = async () => {
        callGetNewsApi(`song/livefeed_ad`, dispatch, (data) => {
            console.log(data, "888");
            setLiveFeedAdData(data);
        })
    }
    const getServerPlaylistsProps = async () => {
        if (!profileData || !profileData.id) {
            history.push(`signin`);
            return;
        }
        callGetNewsApi(`song/user_playlists?user_id=${profileData.id}&all=1`, dispatch, (data) => {
            console.log(data);
            setPlaylists(data);
        })
    }

    const handlePagination = (_, value) => {
        console.log(value)
        setOffset(value)
    }

    const [mark, setMark] = useState(false);
    const [sortText, setSortText] = useState("");
    const [choosePlaylist, setChosePlaylist] = useState(null);
    const [share, setShare] = useState(null);

    const handleClick = (value, index) => {
        // setAnchorEl(event.currentTarget);
        if (value) {
            setSortValue(index);
            setSortText(value)
            setMark(false)
        } else {
            setMark(true)
        }
    };

    const handleClose = () => {
        setMark(false)
    };

    const handleMarkClose = () => {
        setChosePlaylist(null)
        setShare(null)
    };

    const handleShowPlaylists = (e, index) => {
        e.stopPropagation()
        setChosePlaylist(index)
        if (!playlists.length) {
            getServerPlaylistsProps()
        }
    };
    const handleShowShare = (e, index) => {
        e.stopPropagation()
        setShare(index)
    };

    const handleAddPlaylists = (e, name, id) => {
        e.stopPropagation()
        callPostNewsApi('song/playlist_songs_cloud_add', { user_id: profileData.id, playlist: name, song_ids: id }, dispatch, (data) => {
            // console.log(data);
            setChosePlaylist(null)
        })
    };

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [payListName, setPayListName] = useState("");
    const [description, setDescription] = useState("");
    const [payListImg, setPayListImg] = useState(null);
    const [uploadFiles, setUploadFiles] = useState(null);
    const [songId, setSongId] = useState(null);
    const showModal = (id) => {
        if (!profileData || !profileData.id) {
            history.push(`signin`);
            return;
        } else {
            setSongId(id)
            setIsModalOpen(true);
            setChosePlaylist(null)
        }
    };

    const handleOk = () => {
        if (payListName) {
            callPostNewsApi('song/create_playlist', { user_id: profileData.id, name: payListName, song_ids: songId, image: uploadFiles }, dispatch, (data) => {
                // console.log(data);
                setIsModalOpen(false);
                setPayListName("")
                setDescription("")
                setPayListImg(null);
                setUploadFiles(null)
                getServerPlaylistsProps()
            })
        }
        console.log(payListImg, uploadFiles)
    };
    const handleCancel = () => {
        setIsModalOpen(false);
        setPayListName("")
        setDescription("")
        setPayListImg(null);
        setUploadFiles(null)
    };

    const changePayListName = (e) => {
        setPayListName(e.target.value)
        console.log(e.target.value)
    }
    const changeDescription = (e) => {
        setDescription(e.target.value)
        console.log(e.target.value)
    }

    const props = {
        name: 'file',
        headers: {
            authorization: 'authorization-text',
        },
        beforeUpload: {
            function() {
                return false;
            }
        },
        showUploadList: false,
        maxCount: 1,
        style: { border: "none" },
        onChange(file) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                setUploadFiles(file.file)
                setPayListImg(fileReader.result)
            }
            fileReader.readAsDataURL(file.file);
        },
    };

    const moveDetailPage = (item) => {
        // dispatch(setPlaysItem(item));
       
        window.location.href = `${process.env.REACT_APP_SERVER_URL}player/play/${item.id}`;
    }

    return (
        <div>
            <div className={classes.mark} style={{ height: mark ? "100%" : "0" }} onClick={handleClose}></div>
            <div className={classes.mark} style={{ height: choosePlaylist !== null ? "100%" : "0" }} onClick={handleMarkClose}></div>
            <Hero setSearchKey={setSearchKey} searchBlogs={searchBlogs} />
            <Grid container className={classes.root}>
                <Grid item xs={12} sm={12} md={3}>
                    <Genres />
                    <div className={classes.adLeft}>
                        {
                            liveFeedAdData?.filter((ele, i) => i < 2).map((item, index) => (<div className={classes.adImage} key={index}>
                                <a href={item.link}>
                                    <Image
                                        src={item.image_url}
                                        alt={item.image_url}
                                        srcSet={item.image_url}
                                        lazyProps={{ width: '100%', height: '100%' }}
                                    />
                                </a>
                            </div>))
                        }
                    </div>
                </Grid>
                <Grid item xs={12} md={6}>
                    <Box sx={{ width: '100%' }}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider', mt: 4, position: "relative" }}>
                            <Tabs value={currentTab} onChange={handleTabChange} aria-label="simple tabs example">
                                <Tab label="Music" {...a11yProps(0)} />
                                <Tab label="Episodes" {...a11yProps(1)} />
                                <Tab label="Playlists" {...a11yProps(2)} />
                                <Tab label="Artists" {...a11yProps(3)} />
                            </Tabs>
                            <div className={classes.sort}>
                                <div className={classes.searchInputContainer}>
                                    <FormControl fullWidth variant="outlined">
                                        <OutlinedInput
                                            size="large"
                                            // onChange={event => setSearchKey(event.target.value)}
                                            value={sortText}
                                            placeholder="Sort"
                                            endAdornment={<Icon
                                                fontIconClass="fa fa-times"
                                                size="small"
                                                style={{ opacity: 0.5, cursor: "pointer" }}
                                                onClick={() => (setSortValue(""), setSortText(""))}
                                            />}
                                            onClick={() => handleClick("")}
                                        />
                                    </FormControl>
                                </div>
                                <ul className={classes.ul} style={{ display: mark ? "block" : "none" }}>
                                    {
                                        svg.map((item, index) => <li className={classes.li} onClick={() => handleClick(item.text, index)} key={index} style={{ marginTop: index == 0 ? "8px" : "0" }}>
                                            <i className={classes.i}>
                                                {item.svg}
                                            </i>
                                            {item.text}
                                        </li>)
                                    }
                                </ul>
                            </div>
                        </Box>
                        <TabPanel value={currentTab} index={0}>
                            <div className={classes.medias}>
                                {
                                    liveFeedData?.songs?.data.map((item, index) => (<Grid container className={classes.grid} key={index} onClick={() => moveDetailPage(item)}>
                                        <Grid item>
                                            <div className={classes.image}>
                                                <Image
                                                    src={item.album_art}
                                                    alt={item.album_art}
                                                    srcSet={item.album_art}
                                                    lazyProps={{ width: '100%', height: '100%' }}
                                                    className={classes.img}
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item className={classes.gridItem} container direction="column" justifyContent="space-between">
                                            <Typography className={clsx(classes.typography2)}>{item.albumName}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography3)}>{item.artistName}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography4)}>
                                                <Icon
                                                    fontIconClass="far fa-star"
                                                    style={{ color: "#fff", verticalAlign: "bottom", marginRight: "10px" }}
                                                />
                                                {item.rate} ({item.rates_count} Reviews)
                                            </Typography>
                                        </Grid>

                                        <Grid item container justifyContent='flex-end' alignItems='center' className={classes.iconButton} onClick={(e) => {
                                            e.stopPropagation()
                                        }}>
                                            <Icon
                                                fontIconClass="fas fa-share-alt"
                                                style={{ color: "#fff", zIndex: 19 }}
                                                onClick={(e) => handleShowShare(e, index)}
                                            />
                                            <Icon
                                                fontIconClass="fas fa-plus"
                                                style={{ color: "#fff", margin: "0 10px", zIndex: 19 }}
                                                onClick={(e) => handleShowPlaylists(e, index)}
                                            />
                                            <ul className={clsx(classes.ul, classes.ul1)} style={{ display: share == index ? "block" : "none" }}>
                                                <div className={classes.ulHead}>Choose Share
                                                    <Icon
                                                        fontIconClass="fa fa-times"
                                                        size="small"
                                                        style={{ opacity: 0.5, cursor: "pointer" }}
                                                        onClick={() => setShare(null)}
                                                    />
                                                </div>
                                                <div className={classes.content}>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        message
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        email
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        etc
                                                    </li>
                                                </div>
                                            </ul>
                                            <ul className={clsx(classes.ul, classes.ul1)} style={{ display: choosePlaylist == index ? "block" : "none" }}>
                                                <div className={classes.ulHead}>Choose Playlist
                                                    <Icon
                                                        fontIconClass="fa fa-times"
                                                        size="small"
                                                        style={{ opacity: 0.5, cursor: "pointer" }}
                                                        onClick={() => setChosePlaylist(null)}
                                                    />
                                                </div>
                                                <div className={classes.content}>
                                                    {
                                                        playlists.map((ele, i) => <li className={clsx(classes.li, classes.li1)} onClick={(e) => handleAddPlaylists(e, ele.name, item.id)} key={i}>
                                                            {ele.name}
                                                        </li>)
                                                    }
                                                </div>
                                                <div className={classes.ulFoot} onClick={() => showModal(item.id)}>
                                                    <Icon
                                                        fontIconClass="fas fa-plus"
                                                        style={{ color: "#000", margin: "0 10px", zIndex: 30, fontSize: "12px" }}
                                                    />
                                                    New playlist
                                                </div>
                                            </ul>
                                        </Grid>
                                    </Grid>))
                                }
                            </div>
                            <div className={classes.pagination}>
                                <Pagination count={liveFeedData?.songs.counts?.total_pages} variant="outlined" shape="rounded" onChange={handlePagination} page={offset} />
                            </div>
                        </TabPanel>
                        <TabPanel value={currentTab} index={1}>
                            <div id='media_container' className={classes.medias}>
                                {
                                    liveFeedData?.episodes?.data.map((item, index) => (<Grid container className={classes.grid} key={index} onClick={() => {
                                        window.location.href = `${process.env.REACT_APP_SERVER_URL}player/season/${item.id}`;
                                    }}>
                                        <Grid item>
                                            <div className={classes.image}>
                                                <Image
                                                    src={item.avatarURL}
                                                    alt={item.avatarURL}
                                                    srcSet={item.avatarURL}
                                                    lazyProps={{ width: '100%', height: '100%' }}
                                                    className={classes.img}
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item className={classes.gridItem} container direction="column" justifyContent="space-between">
                                            <Typography className={clsx(classes.typography2)}>{item.podcastTitle}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography3)}>{item.sponsor}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography4)}>
                                                <Icon
                                                    fontIconClass="far fa-star"
                                                    style={{ color: "#fff", verticalAlign: "bottom", marginRight: "10px" }}
                                                />
                                                {item.rate} ({item.rates_count} Reviews)
                                            </Typography>
                                        </Grid>

                                        <Grid item container justifyContent='flex-end' alignItems='center' className={classes.iconButton} onClick={(e) => {
                                            e.stopPropagation()
                                        }}>
                                            <Icon
                                                fontIconClass="fas fa-share-alt"
                                                style={{ color: "#fff" ,zIndex:19}}
                                                onClick={(e) => handleShowShare(e, index)}
                                            />
                                            <Icon
                                                fontIconClass="fas fa-plus"
                                                style={{ color: "#fff", margin: "0 10px" }}
                                            />
                                            <ul className={clsx(classes.ul, classes.ul1)} style={{ display: share == index ? "block" : "none" }}>
                                                <div className={classes.ulHead}>Choose Share
                                                    <Icon
                                                        fontIconClass="fa fa-times"
                                                        size="small"
                                                        style={{ opacity: 0.5, cursor: "pointer" }}
                                                        onClick={() => setShare(null)}
                                                    />
                                                </div>
                                                <div className={classes.content}>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        message
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        email
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        etc
                                                    </li>
                                                </div>
                                            </ul>
                                        </Grid>
                                    </Grid>))
                                }
                            </div>
                            <div className={classes.pagination}>
                                <Pagination count={liveFeedData?.episodes.counts?.total_pages} variant="outlined" shape="rounded" onChange={handlePagination} page={offset} />
                            </div>
                        </TabPanel>
                        <TabPanel value={currentTab} index={2}>
                            <div id='media_container' className={classes.medias}>
                                {
                                    liveFeedData?.playlists?.data.map((item, index) => (<Grid container className={classes.grid} key={index} onClick={() => {
                                        window.location.href = `${process.env.REACT_APP_SERVER_URL}player/playlist/${item.id}`;
                                    }}>
                                        <Grid item>
                                            <div className={classes.image}>
                                                <Image
                                                    src={item.remoteAvatarPath}
                                                    alt={item.remoteAvatarPath}
                                                    srcSet={item.remoteAvatarPath}
                                                    lazyProps={{ width: '100%', height: '100%' }}
                                                    className={classes.img}
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item className={classes.gridItem} container direction="column" justifyContent="space-between">
                                            <Typography className={clsx(classes.typography2)}>{item.name}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography3)}>{item.artistName}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography4)}>
                                                <Icon
                                                    fontIconClass="far fa-star"
                                                    style={{ color: "#fff", verticalAlign: "bottom", marginRight: "10px" }}
                                                />
                                                {item.rate} ({item.rates_count} Reviews)
                                            </Typography>
                                        </Grid>

                                        <Grid item container justifyContent='flex-end' alignItems='center' className={classes.iconButton} onClick={(e) => {
                                            e.stopPropagation()
                                        }}>
                                            <Icon
                                                fontIconClass="fas fa-share-alt"
                                                style={{ color: "#fff" ,zIndex:19}}
                                                onClick={(e) => handleShowShare(e, index)}
                                            />
                                            <Icon
                                                fontIconClass="fas fa-plus"
                                                style={{ color: "#fff", margin: "0 10px" }}
                                            />
                                              <ul className={clsx(classes.ul, classes.ul1)} style={{ display: share == index ? "block" : "none" }}>
                                                <div className={classes.ulHead}>Choose Share
                                                    <Icon
                                                        fontIconClass="fa fa-times"
                                                        size="small"
                                                        style={{ opacity: 0.5, cursor: "pointer" }}
                                                        onClick={() => setShare(null)}
                                                    />
                                                </div>
                                                <div className={classes.content}>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        message
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        email
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        etc
                                                    </li>
                                                </div>
                                            </ul>
                                        </Grid>
                                    </Grid>))
                                }
                            </div>
                            <div className={classes.pagination}>
                                <Pagination count={liveFeedData?.playlists.counts?.total_pages} variant="outlined" shape="rounded" onChange={handlePagination} page={offset} />
                            </div>
                        </TabPanel>
                        <TabPanel value={currentTab} index={3}>
                            <div id='media_container' className={classes.medias}>
                                {
                                    liveFeedData?.artists?.data.map((item, index) => (<Grid container className={classes.grid} key={index} onClick={() => {
                                        history.replace("/account/artist_profile",item)
                                    }}>
                                        <Grid item>
                                            <div className={classes.image}>
                                                <Image
                                                    src={item.avatarURL}
                                                    alt={item.avatarURL}
                                                    srcSet={item.avatarURL}
                                                    lazyProps={{ width: '100%', height: '100%' }}
                                                    className={classes.img}
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item className={classes.gridItem} container direction="column" justifyContent="space-between">
                                            <Typography className={clsx(classes.typography2)}>{item.name}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography3)}>{item.artistName}</Typography>
                                            <Typography className={clsx(classes.typography, classes.typography4)}>
                                                <Icon
                                                    fontIconClass="far fa-star"
                                                    style={{ color: "#fff", verticalAlign: "bottom", marginRight: "10px" }}
                                                />
                                                {item.rate} ({item.rates_count} Reviews)
                                            </Typography>
                                        </Grid>

                                        <Grid item container justifyContent='flex-end' alignItems='center' className={classes.iconButton} onClick={(e) => {
                                            e.stopPropagation()
                                        }}>
                                            <Icon
                                                fontIconClass="fas fa-share-alt"
                                                style={{ color: "#fff" ,zIndex:19}}
                                                onClick={(e) => handleShowShare(e, index)}
                                            />
                                            <Icon
                                                fontIconClass="fas fa-plus"
                                                style={{ color: "#fff", margin: "0 10px" }}
                                            />
                                              <ul className={clsx(classes.ul, classes.ul1)} style={{ display: share == index ? "block" : "none" }}>
                                                <div className={classes.ulHead}>Choose Share
                                                    <Icon
                                                        fontIconClass="fa fa-times"
                                                        size="small"
                                                        style={{ opacity: 0.5, cursor: "pointer" }}
                                                        onClick={() => setShare(null)}
                                                    />
                                                </div>
                                                <div className={classes.content}>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        message
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        email
                                                    </li>
                                                    <li className={clsx(classes.li, classes.li1)}>
                                                        etc
                                                    </li>
                                                </div>
                                            </ul>
                                        </Grid>
                                    </Grid>))
                                }
                            </div>
                            <div className={classes.pagination}>
                                <Pagination count={liveFeedData?.playlists.counts?.total_pages} variant="outlined" shape="rounded" onChange={handlePagination} page={offset} />
                            </div>
                        </TabPanel>
                    </Box>
                </Grid>
                <Grid item xs={12} md={3} >
                    <div className={classes.adRight}>
                        {
                            liveFeedAdData?.filter((ele, i) => i > 1).map((item, index) => (<div className={classes.adImage} key={index}>
                                <a href={item.link}>
                                    <Image
                                        src={item.image_url}
                                        alt={item.image_url}
                                        srcSet={item.image_url}
                                        lazyProps={{ width: '100%', height: '100%' }}
                                    />
                                </a>
                            </div>))
                        }
                    </div>
                </Grid>
            </Grid>




            <Modal open={isModalOpen} onCancel={handleCancel} className='playList' centered>
                <Box sx={{ display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center" }}>
                    <Typography style={{ fontSize: "24px", color: "#000" }}>create playList</Typography>
                    <Grid container className={classes.ModalGrid}>
                        <Grid item xs={12} md={4}>
                            <Upload {...props}>
                                <Box className={classes.ModalUpload}>
                                    {
                                        payListImg ? <Image
                                            src={payListImg}
                                            alt={payListImg}
                                            srcSet={payListImg}
                                            lazyProps={{ width: '100%', height: '100%' }}
                                        /> : <>
                                            <Typography style={{ color: "#b7b7b7", fontSize: "24px", pb: "10px", }}>Change Image</Typography>
                                        </>
                                    }
                                </Box>
                            </Upload>
                        </Grid>
                        <Grid item xs={12} md={8} className={classes.ModalGridItem}>
                            <Typography className={classes.ModalTitle}>PlayList</Typography>
                            <Input placeholder='My PlayList' onChange={changePayListName} value={payListName} />
                            <Typography className={clsx(classes.ModalTitle, classes.ModalTitle1)}>Description</Typography>
                            <Input.TextArea onChange={changeDescription} value={description} />
                        </Grid>
                    </Grid>

                    <Box>
                        <Button color={"primary"} onClick={() => handleOk()}>
                            CREATE
                        </Button>
                    </Box>
                </Box>
            </Modal>
        </div>
    )
}

LiveFeed.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default LiveFeed

